<template>
  <div>
    <MyHeader style="margin-bottom: 50px"></MyHeader>
    <RightShow></RightShow>
    <div style="width: 1200px;margin-left: 80px">
      <el-card class="box-card">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="" style="height: 300px">
              <img :src="Myphoto" alt="" style="width: 100%;height: 100%">
            </div>
          </el-col>
          <el-col :span="8" :offset="1">
            <div style="margin-bottom: 20px"><span
                style="font-size: 22px;font-weight: 600;letter-spacing: 2px;color: #f5be74;margin-right: 5px;">关于我</span><span>/about us</span>
              <el-link icon="el-icon-edit" style="margin-left: 15px" @click="myInfo">编辑</el-link>
            </div>
            <div class="info">姓名：{{ user_name }}</div>
            <div class="info">注册时间：{{ register_time }}</div>
            <div class="info">简介：{{ aboutUs }}</div>
          </el-col>
        </el-row>
      </el-card>
      <div style="margin-top: 80px">
        <div
            style="font-weight: 600;font-size: 25px;letter-spacing: 5px;border-bottom: 1px solid #8395a7;padding-bottom: 5px">
          我的作品/文章
        </div>
        <!--        没有发布文章就展示-->
        <div style="margin-top: 200px;display: flex;justify-content: center" v-show="!isHave">
          <el-link icon="el-icon-circle-plus-outline" style="font-size: 30px" @click="toArticle">你还没有发表过文章</el-link>
        </div>
        <!--        有作品-->
        <div v-show="isHave">
          <ul v-for="article in articleList" :key="article.article_id" :v-if="Refresh">
            <li style="border-bottom: 1px solid #dfe6e9;padding-bottom: 10px">
              <div class="" style="font-size: 20px;font-weight: 500;margin-bottom: 10px">{{ article.article_title }}
              </div>
              <div class="BodyLetter" style="font-size: 16px;text-indent:1em">{{ article.article_content }}
              </div>
              <div style="font-size: 12px;margin-top: 20px;">
                <span>发布时间：{{ $moment(article.putout_time).format("YYYY-MM-DD hh:mm:ss") }}</span>
                <div style="display: flex;justify-content: space-between;margin-top: 20px">
                  <el-link type="primary" @click="getArticleID(article.article_id)">查看详情</el-link>
                  <el-popconfirm title="确定删除该文章吗？" @confirm="delArticle(article.article_id)">
                    <el-button
                        type="danger"
                        size="mini"
                        slot="reference"
                        icon="el-icon-delete"
                    >
                      删除
                    </el-button>
                  </el-popconfirm>
                </div>
              </div>

            </li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import MyHeader from "@/components/MyHeader";
import RightShow from "@/components/RightShow";


export default {
  name: "MyBlog",
  components: {RightShow, MyHeader},
  data() {
    return {
      Myphoto: "",
      aboutUs: '',
      register_time: '',
      user_name: '',
      articleList: '',
      isHave: false,
      put_time: '',
      Refresh: true
    }
  },
  methods: {

    myInfo() {
      this.$router.push({name: 'editUser'})
    },
    toArticle() {
      this.$router.push({name: 'WriteArticle'})

    },
    getArticleID(index) {
      console.log(index)
      this.$router.push({name: 'newContent', query: {id: index}})
    },
    //删除文章
    delArticle(id) {
      console.log(id)
      this.$api.articleApi.delArticle({articleId: id}).then((value) => {
        console.log('id' + id)
        if (value.status === 0) {
          console.log(this.articleList)
          // let articleID = removeList(this.articleList, id)
          let article = []
          this.articleList.forEach(item => {
            article.push(item)
          })
          console.log(article)
          let deleteBOx = article.filter(value => {
            return value.article_id === id
          })
          console.log(deleteBOx)
          this.articleList = article.filter(value => value.article_id !== id)

          if (this.articleList.length <= 0) {
            this.isHave = false
          }
          this.Refresh = false
          this.Refresh = true
        } else {
          this.$message({
            message: value.message,
            type: 'error'
          })
        }
      })
    }
  },
  created() {
    //获取头像
    this.$api.userApi.userGetIcon({id: this.$store.state.commitSum.userID}).then(value => {
      if (value.user_icon) {
        this.Myphoto = value.user_icon
      } else {
        this.Myphoto = require('../../public/img/Myphoto.jpg')
      }
    })
    //获取信息
    this.$api.userApi.userInfo({id: this.$store.state.commitSum.userID}).then(value => {
      console.log(value.result)
      this.user_name = value.result.user_name
      this.register_time = this.$moment(value.result.register_time).format("YYYY-MM-DD hh:mm:ss")
      this.aboutUs = (value.result.about_us) ? value.result.about_us : '暂无'
    })
  },
  mounted() {
    //获取该用户的文章列表
    this.$api.articleApi.userArticle({id: this.$store.state.commitSum.userID}).then(result => {
      if (result.length > 0) {
        this.isHave = true
        this.articleList = result
        this.put_time = this.$moment(this.articleList[0].putout_time).format("YYYY-MM-DD hh:mm:ss")
        console.log(this.articleList)
      } else {
        this.isHave = false
      }
    })

  }

}
</script>
<style scoped>
.info {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 400;
}

.BodyLetter {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>